<template>
	<div class="employ_conter">
		<div class="Statistics_item conter">
			<div class="Statistics_item1">
				<div class="Statistics_item2 Statistics_item3">
					<div class="Statistics_item2_top">
						<!--          <h3 style="color: #666666;margin-top: 10px;text-align: center">理赔数据统计</h3>-->
						<div style="display: flex;">
							<el-button type="primary" @click="getOccurrenceMonth">月份</el-button>
							<el-button type="primary" @click="getOccurrencequarter">季度</el-button>
						</div>
						<el-form style="margin:30px 0;display: flex;flex-wrap: wrap;height: 100px; " ref="queryParams" :model="queryParams2"
							label-width="100px">
							<el-form-item label="年份">
								<el-date-picker v-model="queryParams2.year" type="year" placeholder="选择年"
									value-format="yyyy">
								</el-date-picker>
							</el-form-item>
							<el-form-item v-if="show2" label="月份">
								<el-select v-model="queryParams2.months" multiple placeholder="请选择月份">
									<el-option v-for="item in OccurrenceRate" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item v-else label="季度">
								<el-select v-model="queryParams2.quarters" multiple placeholder="请选择季度">
									<el-option v-for="item in OccurrenceRate1" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="被保险人" label-width="100px">
								<el-select v-model="queryParams2.sys_id" placeholder="请选择被保险人">
									<el-option v-for="item in insured" :key="item.user_id" :label="item.user_name"
										:value="item.user_id">
									</el-option>
								</el-select>
							</el-form-item>
							<div class="btn">

								<el-button type="primary" size="mini" @click="getSearchRate">搜索</el-button>
								<el-button type="info" size="mini" @click="resetRate">重置</el-button>
							</div>
						</el-form>
						<div class="peopleNumber1">
							<div class="peopleNumber2" @click="getamount">
								<div class="title">已决金额</div>
								<div class="price">
									<span>{{ total1.decidedMoney || 0 }}</span>
									<span class="name"> 元</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img1+')'}" @click="getamount">
								<div class="title">未决金额 </div>
								<div class="price">
									<span>{{ total1.estimateMoney || 0}}</span>
									<span class="name"> 元</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img2+')'}" @click="getamount">
								<div class="title">出险次数 </div>
								<div class="price">
									<span>{{ total1.riskTimes || 0 }}</span>
									<span class="name">次</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img3+')'}" @click="getamount1">
								<div class="title">实际用工单位 </div>
								<div class="price">
									<span>{{ company || 0 }}</span>
									<span class="name">人</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img4+')'}">
								<div class="title">已决赔付率 </div>
								<div class="price">
									<span>{{ decidedRate  || 0}}</span>
									<span class="name">%</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img5+')'}">
								<div class="title">未决赔付率 </div>
								<div class="price">
									<span>{{ estimateRate || 0 }}</span>
									<span class="name">%</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img5+')'}">
								<div class="title">出险率 </div>
								<div class="price">
									<span>{{ risksRate || 0}}</span>
									<span class="name">%</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img6+')'}">
								<div class="title">总赔付率 </div>
								<div class="price">
									<span>{{ totalRate || 0 }}</span>
									<span class="name">%</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img7+')'}">
								<div class="title">4类工种出险率 </div>
								<div class="price">
									<span>{{ typeRate || 0 }}</span>
									<span class="name">%</span>
								</div>
							</div>
							<div class="peopleNumber2" :style="{backgroundImage:'url('+img7+')'}">
								<div class="title">4类以上工种出险率 </div>
								<div class="price">
									<span>{{ typeRate5 || 0 }}</span>
									<span class="name">%</span>
								</div>
							</div>
						</div>
					</div>
					<div class="Statistics_item2_conter">
						<div class="title">理赔率统计</div>
						<div class="rateConter">
							<div v-if="show2" ref="rate" style="width:100%;height:500px;"></div>
							<div v-else ref="rate1" style="width: 100%;height:500px;"></div>
							<!--            <div v-if="show2" ref="rate2" style="width:100%;height:400px;"></div>-->
							<!--            <div v-else ref="rate3" style="width:70%;height:400px;"></div>-->
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		totalInsurePrice,
		totalRisksCount,
		totalUserCount,
		totalRisksCount1
	} from '@/api/home'
	// import {EleResize} from '@/utils/esresize'
	import {
		seacond_admin
	} from "@/api/insurance/user";
	let echarts = require('echarts/lib/echarts')
	export default {
		data() {
			return {
				img1: require('../../../assets/images/statistics_bg10.png'),
				img2: require('../../../assets/images/statistics_bg6.png'),
				img3: require('../../../assets/images/statistics_bg7.png'),
				img4: require('../../../assets/images/statistics_bg8.png'),
				img5: require('../../../assets/images/statistics_bg4.png'),
				img6: require('../../../assets/images/statistics_bg5.png'),
				img7: require('../../../assets/images/statistics_bg3.png'),
				show2: true,

				//查看保费
				queryParams2: {
					months: [],
					quarters: [],
					year: "2021",
					user_id: '', //操作人id
					sys_id: '',
				},

				count: [], //人数
				count4: [], //季度4类人数


				decidedRate: '', //已决赔付率
				estimateRate: '', //未决赔付率
				risksRate: '', //出险率
				totalRate: '', //总赔付率
				typeRate: '', //工种出险率
				typeRate5: 0, //4类以上工种出险率
				decidedMoney: [], //月份已决金额
				estimateMoney: [], //月份未决金额
				risks: [], //月份出现率
				decidedMoney1: [], //季度已金额
				estimateMoney1: [], //季度未决金额
				riskTimes: [], //季度出险率
				total1: {}, //总的出险次数
				queryParams1: {
					user_id: '',
					role_id: '',
				},
				insured: [], //被保险人
				//  出险率月份
				OccurrenceRate: [{
						value: '1',
						label: '1月'
					},
					{
						value: '2',
						label: '2月'
					},
					{
						value: '3',
						label: '3月'
					},
					{
						value: '4',
						label: '4月'
					},
					{
						value: '5',
						label: '5月'
					},
					{
						value: '6',
						label: '6月'
					},
					{
						value: '7',
						label: '7月'
					},
					{
						value: '8',
						label: '8月'
					},
					{
						value: '9',
						label: '9月'
					},
					{
						value: '10',
						label: '10月'
					},
					{
						value: '11',
						label: '11月'
					},
					{
						value: '12',
						label: '12月'
					}
				],
				//出现率年份
				OccurrenceRate1: [{
					value: '1',
					label: '1季度'
				}, {
					value: '2',
					label: '2季度'
				}, {
					value: '3',
					label: '3季度'
				}, {
					value: '4',
					label: '4季度'
				}],
				company: '', //实际用工单位
			}
		},
		//钩子函数
		mounted() {
			var user = JSON.parse(localStorage.getItem('userInfo'));
			this.queryParams1.user_id = user.userId;
			if (user.roles.length != 0) {
				this.queryParams1.role_id = user.roles[0].roleId
			}
			seacond_admin(this.queryParams1).then(res => {
				this.insured = res.data;
				// console.log('被保险人数据',res)
			})
			this.queryParams2.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
			this.drawChart5();

		},
		methods: {

			//点击 已决金额 未决金额 出现次数 跳转到报案记录页面
			getamount() {
				var obj = {
					months: this.queryParams2.months,
					quarters: this.queryParams2.quarters,
					year: this.queryParams2.year,
					sys_id: this.queryParams2.sys_id
				}
				//跳转到报案记录页面
				this.$router.push({
					path: '/example/repordRecord',
					// path: '/business/repordRecord/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//点击实际用工单位跳转到报案详情
			getamount1() {
				var obj = {
					months: this.queryParams2.months,
					quarters: this.queryParams2.quarters,
					year: this.queryParams2.year,
					userId: this.queryParams2.userId,
					sys_id: this.queryParams2.sys_id
				}
				this.$router.push({
					path: '/example/repordRecord',
					// path: '/business/repordRecord/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//查看月份出现率
			getOccurrenceMonth() {
				this.show2 = true;
				this.drawChart5();
				this.resetRate();
			},
			//查看季度出现率
			getOccurrencequarter() {
				this.show2 = false;
				this.drawChart6();
				this.resetRate();
			},
			//搜索出现率数据
			getSearchRate() {
				if (this.show2) {
					this.drawChart5();
				} else {
					this.drawChart6();
				}
			},

			//重置出现率数据
			resetRate() {
				this.queryParams2 = {
					months: [],
					quarters: [],
					year: "2021",
					user_id: this.queryParams2.user_id,
					sys_id: '',
				}
				if (this.show2) {
					this.drawChart5();
				} else {
					this.drawChart6();
				}
			},

			drawChart5() {
				// console.log('queryParams2',this.queryParams2)
				totalRisksCount1(this.queryParams2).then(res => {
					// console.log('出现次数12', res);
					//已决赔付率
					this.decidedMoney = [];
					//未决赔付率
					this.estimateMoney = [];
					//出险率
					this.risks = [];
					this.total1 = res.data.total;
					//已决赔付率
					this.decidedRate = res.data.decidedRate;
					//未决赔付率
					this.estimateRate = res.data.estimateRate;
					//出险率
					this.risksRate = res.data.risksRate;
					//总赔付率
					this.totalRate = res.data.totalRate;
					this.typeRate5 = res.data.typeRate5;
					this.company = res.data.company;
					// console.log('totalRate',this.totalRate)
					this.typeRate = res.data.typeRate;
					//查询月份的数据
					for (var i = 0; i < res.data.months.length; i++) {
						var key = res.data.months[i];
						this.decidedMoney[key.month - 1] = key.decidedMoney
					}
					for (var i = 0; i < res.data.months.length; i++) {
						var key = res.data.months[i];
						this.estimateMoney[key.month - 1] = key.estimateMoney
					}
					for (var i = 0; i < res.data.months.length; i++) {
						var key = res.data.months[i];
						this.risks[key.month - 1] = key.risks
					}
					// console.log('risks', this.risks)
					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.rate);
					// let myChart1 = this.$echarts.init(this.$refs.rate2);
					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c}  % '
						},
						legend: {
							data: ["理赔率"]
						},
						xAxis: {
							name: '月份',
							type: 'category',
							data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月',
								'11 月', '12 月'
							]
						},
						emptyshow: {
							type: Boolean,
							default: true,
						},
						grid: {
							left: '10%',
							right: '10%',
							bottom: '3%',
							// top:'3%',
							containLabel: true
						},

						yAxis: [{
							name: '%',
							type: 'value',
						}],
						series: [{
								name: "理赔率",
								type: "line",
								showSymbol: false,
								// clip: true,
								data: this.decidedMoney,
								color: ['#16EA76'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign:'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 8,
								//   formatter: '{c} %',
								//   fontSize:12,
								//   color:'#35E0C9'
								// },
							},
							// {
							//   name: "未决金额",
							//   type: "bar",
							//   data: this.estimateMoney,
							//   color: ['#EE4CC0'],
							//   label: {
							//     show: true,
							//     position: 'insideLeft',
							//     verticalAlign:'middle',
							//     align: 'left',
							//     rotate: 90,
							//     distance: 8,
							//     formatter: '{c} 元',
							//     fontSize:12,
							//     color:'#1A9BF7'
							//   },
							// },

						]
					};
					// let option1 = {
					//   color: ['#3398DB'],
					//   tooltip: {
					//     trigger: 'item',
					//     formatter: '{a} <br/>{b} : {c} ( 次 )'
					//   },
					//   legend: {
					//     data: ["出险次数"]
					//   },
					//   xAxis: {
					//     name: '月份',
					//     type: 'category',
					//     data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
					//   },
					//   emptyshow: {
					//     type: Boolean,
					//     default: true,
					//   },
					//   grid: {
					//     left: '10%',
					//     right: '10%',
					//     bottom: '3%',
					//     // top:'3%',
					//     containLabel: true
					//   },
					//
					//   yAxis: [
					//     {
					//       name: '出险次数 ( 次 )',
					//       type: 'value',
					//     }
					//   ],
					//   series: [
					//
					//     {
					//       name: "出险次数",
					//       type: "line",
					//       data: this.risks,
					//       color: ['#79DA6C'],
					//       label: {
					//         show: true,
					//         position:'top',
					//         formatter: '{c} 次',
					//         fontSize:12,
					//       },
					//     },
					//
					//
					//   ]
					// };

					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// window.addEventListener('resize', () => { myChart1.resize() })
					// 展示月份的统计表
					myChart.setOption(option);
					// myChart1.setOption(option1);
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						const pointInPixel = [params.offsetX, params.offsetY];
						var month = []

						month.push(params.name.split(' ')[0])
						var obj = {
							month: month,
							quarters: [],
							year: this.queryParams2.year,
							sys_id: this.queryParams2.sys_id
						}
						this.$router.push({
							path: '/example/repordRecord',
							// path: '/business/repordRecord/index',
							query: {
								peopleNum: obj
							}
						})
						// console.log('params', params)
						// console.log('month', month)
					})
					// myChart1.off('click');
					// //打开当前点击事件
					// myChart1.on('click', (params) => {
					//   const pointInPixel = [params.offsetX, params.offsetY];
					//   var month = []
					//
					//   month.push(params.name.split(' ')[0])
					//   var obj = {
					//     month: month,
					//     quarters: [],
					//     year: this.queryParams2.year,
					//     sys_id:this.queryParams2.sys_id
					//   }
					//   this.$router.push({
					//     path:'/example/repordRecord',
					//     // path: '/business/repordRecord/index',
					//     query: {
					//       peopleNum: obj
					//     }
					//   })
					//   // console.log('params', params)
					//   // console.log('month', month)
					// })
				})

			},
			drawChart6() {
				totalRisksCount1(this.queryParams2).then(res => {
					// console.log('出现次数24', res);
					//已决赔付率
					this.decidedMoney1 = [];
					//未决赔付率
					this.estimateMoney1 = [];
					//出险率
					this.riskTimes = [];
					this.total1 = res.data.total;
					//已决赔付率
					this.decidedRate = res.data.decidedRate;
					//未决赔付率
					this.estimateRate = res.data.estimateRate;
					this.company = res.data.company;
					//出险率
					this.risksRate = res.data.risksRate;
					//总赔付率
					this.totalRate = res.data.totalRate;
					// console.log('totalRate',this.totalRate)
					this.typeRate = res.data.typeRate;
					this.typeRate5 = res.data.typeRate5;
					//查询月份的数据
					for (var i = 0; i < res.data.quarters.length; i++) {
						var key = res.data.quarters[i];
						this.decidedMoney1[key.quarter - 1] = key.decidedMoney
					}
					for (var i = 0; i < res.data.quarters.length; i++) {
						var key = res.data.quarters[i];
						this.estimateMoney1[key.quarter - 1] = key.estimateMoney
					}
					for (var i = 0; i < res.data.quarters.length; i++) {
						var key = res.data.quarters[i];
						this.riskTimes[key.quarter - 1] = key.riskTimes
					}

					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.rate1);
					// let myChart1 = this.$echarts.init(this.$refs.rate3);

					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c}  % '
						},
						legend: {
							data: ["理赔率"]
						},
						xAxis: {
							name: '季度',
							type: 'category',
							data: ['1 季度', '2 季度', '3 季度', '4 季度']
						},
						emptyshow: {
							type: Boolean,
							default: true,
						},
						grid: {
							left: '10%',
							right: '10%',
							bottom: '3%',
							// top:'3%',
							containLabel: true
						},

						yAxis: [{
							name: '百分比( % )',
							type: 'value',
						}],
						series: [{
								name: "理赔率",
								type: "line",
								data: this.decidedMoney1,
								color: ['#8D5DED'],
								label: {
									show: true,
									position: 'insideLeft',
									verticalAlign: 'middle',
									align: 'left',
									rotate: 90,
									distance: 20,
									formatter: '{c} %',
									fontSize: 12,
									color: '#35E0C9'
								},

							},
							// {
							//   name: "未决金额",
							//   type: "bar",
							//   data: this.estimateMoney1,
							//   color: ['#EE4CC0'],
							//   label: {
							//     show: true,
							//
							//     position: 'insideLeft',
							//     verticalAlign:'middle',
							//     align: 'left',
							//     rotate: 90,
							//     distance: 20,
							//     formatter: '{c} 元',
							//     fontSize:12,
							//     color:'#1A9BF7'
							//   },
							// },

						]
					};
					// let option1 = {
					//   color: ['#3398DB'],
					//   tooltip: {
					//     trigger: 'item',
					//     formatter: '{a} <br/>{b} : {c} ( 次 )'
					//   },
					//   legend: {
					//     data: ["出险次数"]
					//   },
					//   xAxis: {
					//     name: '季度',
					//     type: 'category',
					//     data: ['1 季度', '2 季度', '3 季度', '4 季度']
					//   },
					//   emptyshow: {
					//     type: Boolean,
					//     default: true,
					//   },
					//   grid: {
					//     left: '10%',
					//     right: '10%',
					//     bottom: '3%',
					//     // top:'3%',
					//     containLabel: true
					//   },
					//
					//   yAxis: [
					//     {
					//       name: '出险次数( 次 )',
					//       type: 'value',
					//     }
					//   ],
					//   series: [
					//     {
					//       name: "出险次数",
					//       type: "line",
					//       data: this.riskTimes,
					//       color: ['#79DA6C'],
					//       label: {
					//         show: true,
					//         position:'top',
					//         formatter: '{c} 次',
					//         fontSize:12,
					//       },
					//     },
					//   ]
					// };
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// window.addEventListener('resize', () => { myChart1.resize() })
					// 展示月份的统计表
					myChart.setOption(option);
					// myChart1.setOption(option1);
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						const pointInPixel = [params.offsetX, params.offsetY];
						var quarters = []

						quarters.push(params.name.split(' ')[0])
						var obj = {
							month: [],
							quarters: quarters,
							year: this.queryParams.year,
							sys_id: this.queryParams2.sys_id
						}
						this.$router.push({
							path: '/business/repordRecord/index',
							query: {
								peopleNum: obj,

							}
						})
						// console.log('params', params)
						// console.log('month', month)
					})
					// myChart1.off('click');
					// //打开当前点击事件
					// myChart1.on('click', (params) => {
					//   const pointInPixel = [params.offsetX, params.offsetY];
					//   var quarters = []
					//
					//   quarters.push(params.name.split(' ')[0])
					//   var obj = {
					//     month: [],
					//     quarters:quarters,
					//     year: this.queryParams2.year,
					//     sys_id:this.queryParams2.sys_id
					//   }
					//   this.$router.push({
					//     path:'/example/repordRecord',
					//     // path: '/business/repordRecord/index',
					//     query: {
					//       peopleNum: obj
					//
					//     }
					//   })
					// console.log('params', params)
					// console.log('month', month)
					// })
				})

			},
		},
		created() {

		}
	}
</script>
<style scoped lang="scss">
	.employ_conter {
		background-color: #E9EEF5;
		width: 100%;
		//height: 800px;
		overflow: auto;

		.Statistics_item {
			display: flex;
			//min-width: 50%;
			//max-width: 100%;
			width: 100%;
			//flex-flow: wrap;
			justify-content: space-between;

			.el-form {
				margin: 10px 0;
				display: flex;
				align-items: center;

				//background-color: deeppink;
				.el-form-item {
					margin-bottom: 0;

					.el-select {
						width: 200px;
					}
				}

				.btn {
					margin-left: 10px;
					display: flex;
					align-items: center;
					//background-color: pink
				}
			}

			.Statistics_item1 {
				//background-color: pink;
				margin: 10px;
				//max-width: 100%;
				//min-width:25%;
				width: 100%;

				.Statistics_item2 {
					//overflow: hidden;
					//-webkit-box-shadow: #999 0px 0px 8px;
					//-moz-box-shadow: #999 0px 0px 8px;
					//box-shadow: #999 0px 0px 8px;
					//border-radius: 6px;
					//background: #FFFFFF;
					//background-color: palegoldenrod;
					width: 100%;

					.Statistics_item2_top {
						//background: #FFFFFF;
						border-radius: 20px;
						padding: 20px;

						.peopleNumber1 {
							width: 100%;
							//background-color: pink;
							display: flex;
							justify-content: flex-start;
							flex-flow: wrap;

							.peopleNumber2 {
								width: 17%;
								height: 120px;
								margin-right: 20px;
								margin-bottom: 20px;
								display: flex;
								background: url("../../../assets/images/statistics_bg9.png") no-repeat;
								background-size: 100% 100%;
								flex-direction: column;
								box-sizing: border-box;
								padding: 20px;

								.title {
									font-size: 19px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: #FFFFFF;
								}

								.price {
									margin-top: 5px;

									span {
										font-size: 44px;
										font-family: Microsoft YaHei;
										font-weight: 400;
										color: #FFFFFF;
									}

									.name {
										font-size: 16px;
									}
								}
							}
						}
					}
				}

				.Statistics_item3 {
					width: 100%;
					//margin: 0 auto;
					//background-color: paleturquoise;
				}

			}
		}

		.conter {
			justify-content: flex-start;

			.Statistics_item2_conter {
				margin-top: 20px;
				background: #FFFFFF;
				border-radius: 20px;
				padding: 20px;
				box-sizing: border-box;

				.title {
					height: 26px;
					font-size: 26px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #333333;
					margin: 20px 0;
				}

				.rateConter {
					display: flex;
					//background-color: paleturquoise;

				}
			}

		}

	}

	@media (max-width:1700px) {
		.peopleNumber1 {
			width: 100%;
			//background-color: pink;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;

			.peopleNumber2 {
				width: 310px !important;
				// height: 120px;
				margin-right: 20px;
				margin-bottom: 20px;
				display: flex;
				background: url("../../../assets/images/statistics_bg9.png") no-repeat;
				background-size: 100% 100%;
				flex-direction: column;
				box-sizing: border-box;
				padding: 20px;
			}
		}
	}


	@media (max-width: 1600px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 120px !important;

				.title {
					font-size: 24px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 30px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 22px;
					}
				}
			}
		}
	}

	@media (max-width: 1500px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 110px !important;

				.title {
					font-size: 22px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 28px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 21px;
					}
				}
			}
		}
	}

	@media (max-width: 1400px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 95px !important;

				.title {
					font-size: 19px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 24px !important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 19px !important;
					}
				}
			}
		}
	}

	@media (max-width: 1300px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 85px !important;

				.title {
					font-size: 17px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 22px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 18px;
					}
				}
			}
		}
	}

	@media (max-width: 1200px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 75px !important;

				.title {
					font-size: 14px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 22px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 16px;
					}
				}
			}
		}
	}

	@media (max-width: 1100px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				width: 17% !important;
				height: 70px !important;
				box-sizing: border-box;

				.title {
					font-size: 10px !important;
				}

				.price {
					span {
						font-size: 18px !important;
					}

					.name {
						font-size: 14px;
					}
				}
			}
		}
	}
</style>
